<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <UserHeader/>
      </el-header>
      <el-main>
        <div class="center">
          <RouterView/>
        </div>
      </el-main>
      <el-footer>
        <UserFooter/>
      </el-footer>
    </el-container>
  </div>
</template>

<script setup>
import UserHeader from "@/components/user/home/UserHeader.vue";
import UserFooter from "@/components/user/home/UserFooter.vue";
</script>

<style scoped>
.el-header, .el-main, .el-footer {
  padding: 0;
  height: auto;
}
.el-main{
  background-color: #dcdfe6;
}
.el-footer {
  margin-top: 20px;
  background-color: var(--theme-bg-color);
  padding: 10px 0;
}

</style>